<template>
<!-- 新增，修改，搜索有问题 -->
  <div class='container'>
    <el-card>
      <!-- 搜索栏 -->
      <el-form :inline='true'
        :model='directorysForm'
        class='search-form'
      >
        <el-form-item label='目录名称'>
          <el-input
            v-model='directorysForm.directoryName'
            placeholder='请输入目录名称'
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="directorysForm.state"
            placeholder="请选择"
          >
            <el-option
              label="已启用"
              :value="1"
            />
            <el-option
              label="已禁用"
              :value="0"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearInfo">
            清除
          </el-button>
          <el-button
            type='primary'
            @click='searchInfo'
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 新增按钮 -->
      <el-button
        class="colright"
        size="mini"
        type="success"
        icon="el-icon-edit"
        @click="addDirectories"
      >
        新增目录
      </el-button>
      <!-- 返回学科按钮 -->
      <el-button
        class="back-btn"
        v-show="isShow"
        type='text'
        @click='backSubject'
      >
        <span class="el-icon-back" /> 返回学科
      </el-button>
      <!-- 新增弹窗 -->
      <el-dialog
        title="新增目录"
        :visible.sync="addDirectoryVisible"
        width="30%"
      >
        <el-form
          :model="addDirectoryForm"
          :rules="addRules"
          ref="addForm"
          label-width="80px"
        >
          <!-- 所属学科 -->
          <el-form-item label="所属学科">
            <el-select
              v-model="addDirectoryForm.value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in simpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称">
            <el-input
              v-model="addDirectoryForm.directoryName"
              placeholder="请输入目录名称"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="addDirectorySubmit"
          >
            确 定
          </el-button>
        </span>
      </el-dialog>
      <!-- 修改弹窗 -->
      <el-dialog
        title="修改目录"
        :visible.sync="editDirectoryVisible"
        width="30%"
      >
        <el-form
          :model="editDirectoryForm"
          label-width="80px"
        >
          <!-- 所属学科 -->
          <el-form-item label="所属学科">
            <el-select
              v-model="editDirectoryForm.value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in simpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称">
            <el-input
              v-model="editDirectoryForm.directoryName"
              placeholder="请输入目录名称"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDirectoryVisible = false">
            取 消
          </el-button>
          <el-button
            type="primary"
            @click="editDirectorySubmit"
          >
            确 定
          </el-button>
        </span>
      </el-dialog>
      <!-- 数据数量 -->
      <el-alert
        class="num"
        :title="`数据一共 ${directorysList.counts} 条`"
        :closable="false"
        type="info"
        show-icon
      />
      <!-- 表格 -->
      <my-table
        :table-props="{
          data:directorysList.items,
        }"
        :columns="[
          {label: '序号', prop: 'index', align: 'center', width: '50'},
          {label: '所属学科', prop: 'subjectName', align: 'center', width: '120'},
          {label: '目录名称', prop: 'directoryName', align: 'center', width: '120'},
          {label: '创建者', prop: 'username', align: 'center', width: '120'},
          {label: '创建日期', prop: 'addDate', align: 'center'},
          {label: '面试题数量', prop: 'totals', align: 'center', width: '120'},
          {label: '状态', prop: 'state', align: 'center', width: '120'},
          {label: '操作', slotName: 'operators', align: 'center', fixed: 'right', width: '200'},
        ]"
        :pagination-props="{
          background: true,
          layout: 'prev, pager, next, sizes, jumper',
          total: directorysList.counts,
          pageSizes: [5, 10, 15, 20]
        }"
        :pagination-events="events"
      >
        <template v-slot:operators="scope">
          <el-button
            type="text"
            size="small"
            @click="stateChange(scope.row)"
          >
            {{scope.row.state === "已启用" ? '禁用' : '启用'}}
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.state === '已启用' ? true : false"
            size="small"
            @click="editDirectory(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.state === '已启用' ? true : false"
            size="small"
            @click="deleteDirectory(scope.row)"
          >
            删除
          </el-button>
        </template>
      </my-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as directorysApi from '@/api/hmmm/directorys'
let needId = null;
let needSubjectId = null;
export default {
  name: 'DirectorysList',
  data() {
    return {
      isShow: false,
      editDirectoryVisible: false,
      addDirectoryVisible: false,
      currentPage: 1,
      pagesize: 10,
      events: {
        'size-change': this.handleSizeChange,
        'current-change': this.handleCurrentChange
      },
      // 搜索表单
      directorysForm: {},
      // 添加目录
      addDirectoryForm: {
        // 所属学科
        directoryName: '',
        value: '',
      },
      // 新增验证规则
      addRules: {
        directoryName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      // 修改
      editDirectoryForm : {
        // 所属学科
        directoryName: '',
        value: '',
      },
      options: this.simpleList,
    }
  },
  computed: {
    ...mapState('directorys', [
      'directorysList'
    ]),
    ...mapState('subjects', [
      'simpleList'
    ])
  },
  methods: {
    ...mapActions('directorys', [
      'getDirectorysList'
    ]),
    ...mapActions('subjects', [
      'getSimpleList'
    ]),
    // 当前页改变时
    handleCurrentChange(val) {
      if (!this.$route.params.id) {
        this.currentPage = val
        this.getDirectorysList({
          page: this.currentPage,
          pagesize: this.pagesize
        })
      } else {
        this.currentPage = val
        this.getDirectorysList({
          page: this.currentPage,
          pagesize: this.pagesize,
          subjectID: this.$route.params.id
        })
      }
    },
    // 每页条数改变时
    handleSizeChange(val) {
      if (!this.$route.params.id) {
        this.pagesize = val
        this.getDirectorysList({
          page: this.currentPage,
          pagesize: this.pagesize
        })
      } else {
        this.pagesize = val
        this.getDirectorysList({
          page: this.currentPage,
          pagesize: this.pagesize,
          subjectID: this.$route.params.id
        })
      }
    },
    // 清空搜索
    clearInfo() {
      if (!this.$route.params.id) {
        this.directorysForm = {}
        // 刷新页面
        this.getDirectorysList({
          page: 1,
          pagesize: this.pagesize
        })
      } else{
        this.directorysForm = {}
        // 刷新页面
        this.getDirectorysList({
          page: 1,
          pagesize: this.pagesize,
          subjectID: this.$route.params.id
        })
      }
    },
    // 搜索
    searchInfo() {
      this.getDirectorysList({
        page: 1,
        pagesize: this.pagesize,
        ...this.directorysForm
      })
    },
    // 返回学科
    backSubject() {
      this.$router.go(-1)
    },
    // 新增按钮
    addDirectories() {
      if (!this.$route.params.id) {
        this.addDirectoryVisible = true
      } else {
        this.addDirectoryVisible = true
        this.addDirectoryForm.value = this.$route.params.id
      }
    },
    // 改变状态
    stateChange(row) {
      if (!this.$route.params.id) {
        directorysApi.changeState({
        id: row.id,
        state: row.state === '已启用' ? 0 : 1
        })
        this.$message.success('操作成功')
        // 200毫秒后刷新列表
        setTimeout(() => {
          this.getDirectorysList({
            page: this.currentPage,
            pagesize: this.pagesize
          })
        }, 200)
      } else {
          directorysApi.changeState({
            id: row.id,
            state: row.state === '已启用' ? 0 : 1
          })
          this.$message.success('操作成功')
          // 200毫秒后刷新列表
          setTimeout(() => {
            this.getDirectorysList({
              page: this.currentPage,
              pagesize: this.pagesize,
              subjectID: this.$route.params.id
            })
          }, 200)
      }
    },
    // 取消新增
    cancelAdd() {
      this.addDirectoryVisible = false,
      this.addDirectoryForm = {}
    },
    // 新增目录提交
    addDirectorySubmit() {
      if (!this.$route.params.id) {
        // 新增确认
        directorysApi.add({
          directoryName: this.addDirectoryForm.directoryName,
          subjectID: this.addDirectoryForm.value
        })

        this.addDirectoryForm = {}
        // 关闭弹窗
        this.addDirectoryVisible = false

        // 200毫秒后刷新
        setTimeout(() => {
          this.getDirectorysList({
            page: 1,
            pagesize: this.pagesize
          })
        }, 200)
      } else {
        // 新增确认
        directorysApi.add({
          directoryName: this.addDirectoryForm.directoryName,
          subjectID: this.$route.params.id
        })
        this.addDirectoryForm = {}
        // 关闭弹窗
        this.addDirectoryVisible = false
        // 刷新
        this.getDirectorysList({
          page: 1,
          size: 10,
          subjectID: this.$route.params.id
        })
      }
    },
    // 修改
    editDirectory(row) {
      this.editDirectoryVisible = true;
      needId = row.id;
      needSubjectId = row.subjectID;

      // 返显
      this.editDirectoryForm.directoryName = row.directoryName
      this.editDirectoryForm.value = row.subjectID
    },
    // 修改目录提交
    editDirectorySubmit() {
      if (!this.$route.params.id) {
        // 修改确认
        directorysApi.update({
          id: needId,
          subjectID: needSubjectId,
          directoryName: this.editDirectoryForm.directoryName,
        })
        // 关闭弹窗
        this.editDirectoryVisible = false
        // 200毫秒后刷新页面刷新
        setTimeout(() => {
          this.getDirectorysList({
            page: this.currentPage,
            pagesize: this.pagesize
          })
        }, 200)
      } else {
        // 修改确认
        directorysApi.update({
          id: needId,
          subjectID: needSubjectId,
          directoryName: this.editDirectoryForm.directoryName,
        })
        // 关闭弹窗
        this.editDirectoryVisible = false
        // 200毫秒后刷新页面刷新
        setTimeout(() => {
          this.getDirectorysList({
            page: this.currentPage,
            pagesize: this.pagesize,
            subjectID: this.$route.params.id
          })
        }, 200)
      }
    },
    // 删除
    deleteDirectory(row) {
      if (!this.$route.params.id) {
        this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          directorysApi.remove({
            id: row.id
          })
          // 200毫秒之后刷新页面
          setTimeout(() => {
            this.getDirectorysList({
              page: this.currentPage,
              pagesize: this.pagesize
            })
          }, 200)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          directorysApi.remove({
            id: row.id
          })
          // 200毫秒后刷新页面
          setTimeout(() => {
            this.getDirectorysList({
              page: this.currentPage,
              pagesize: this.pagesize,
              subjectID: this.$route.params.id
            })
          }, 200)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
  },
  created() {
    this.getSimpleList()
    if (!this.$route.params.id) {
      this.getDirectorysList({
        page: this.currentPage,
        pagesize: this.pagesize,

      })
    } else {
      this.isShow = !this.isShow
      this.getDirectorysList({
        page: this.currentPage,
        pagesize: this.pagesize,
        subjectID: this.$route.params.id
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;

  .colright,
  .back-btn {
    float: right;
    margin-bottom: 8px;
    margin-left: 30px;
  }

  .num{
    margin-bottom: 8px;
  }

  .dialog-footer {
    text-align: center;
  }

  .subspan {
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    margin-left: 10px;
  }
}
</style>
